<!-- 订单详情 -->
<template>
  <div class="dashboard-container edit-order">
    <div class="edit-container">
      <el-card
        shadow="never"
        class="order-box"
      >
        <el-row
          :gutter="20"
          justify="center"
        >
          <el-col :span="6">
            <div class="ddbh">
              订单编号：
              <label>{{ formData.id }}</label>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="ydbh">
              运单编号：
              <label>{{ formData.transportOrder? formData.transportOrder.id:'' }}</label>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="xdsj">
              下单时间：
              <label>{{ formData.createTime }}</label>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="ddzt">
              订单状态：
              <label v-if="formData.status == ' 23000'">待取件</label>
              <label v-else-if="formData.status == '23001'">已取件</label>
              <label v-else-if="formData.status == '23003'">网点入库</label>
              <label v-else-if="formData.status == '23004'">待装车</label>
              <label v-else-if="formData.status == '23005'">运输中</label>
              <label v-else-if="formData.status == '23006'">网点出库</label>
              <label v-else-if="formData.status == '23007'">待派送</label>
              <label v-else-if="formData.status == '23008'">派送中</label>
              <label v-else-if="formData.status == '23009'">已签收</label>
              <label v-else-if="formData.status == '23010'">拒收</label>
              <label v-else>已取消</label>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="yjddrq">
              预计到达日期：
              <label>{{ formData.estimatedArrivalTime }}</label>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <el-collapse
        v-model="activeNames"
        style="margin-top: 20px; border: none"
      >
        <el-collapse-item name="1">
          <template slot="title">
            <div class="collapse-detail">基本信息</div>
          </template>

          <div class="block">
            <el-timeline>
              <div class="line"></div>
              <div
                class="pake-info"
                style="margin-top: 10px"
              >
                <img
                  class="img-info1"
                  src="../../assets/fahuo.png"
                  alt=""
                />
                <span style="font-size: 20px;">发货方</span>
              </div>
              <div style="margin-top: 0px; margin-left: 40px; display: flex">
                <div style="">
                  <div
                    class="demo-input-suffix base-info"
                    style="font-size: 18px;"
                  >
                    发货方姓名：
                    <span>{{ formData.senderName }}</span>
                  </div>

                  <div
                    class="demo-input-suffix base-info"
                    style="font-size: 18px;"
                  >
                    发货方地址：
                    <span>
                      {{ formData.senderProvince.name+ formData.senderCity.name+formData.senderCounty.name }}
                    </span>
                  </div>
                </div>
                <div style="margin-left: 174px">
                  <div
                    class="demo-input-suffix base-info"
                    style="font-size: 18px;"
                  >
                    发货方电话：
                    <span>{{ formData.senderPhone }}</span>
                  </div>
                  <div
                    class="demo-input-suffix base-info"
                    style="font-size: 18px;"
                  >
                    &nbsp;&nbsp;&nbsp;详细地址：
                    <span>{{ formData.senderAddress }}</span>
                  </div>
                </div>
              </div>
              <div
                class="pake-info"
                style="margin-top: 20px"
              >
                <img
                  class="img-info2"
                  src="../../assets/shouhuo.png"
                  alt=""
                />
                <span
                  style="display: inline-block; margin-top: 6px;font-size: 20px;"
                >收货方</span>
              </div>
              <div style="margin-top: 0px; margin-left: 40px; display: flex">
                <div style="">
                  <div
                    class="demo-input-suffix base-info"
                    style="font-size: 18px;"
                  >
                    收货方姓名：
                    <span>{{ formData.receiverName }}</span>
                  </div>
                  <div
                    class="demo-input-suffix base-info"
                    style="font-size: 18px;"
                  >
                    收货方地址：
                    <span>
                      {{ formData.receiverProvince.name+formData.receiverCity.name+formData.receiverCounty.name }}
                    </span>
                  </div>
                </div>
                <div style="margin-left: 174px">
                  <div
                    class="demo-input-suffix base-info"
                    style="font-size: 18px;"
                  >
                    收货方电话：
                    <span>{{ formData.receiverPhone }}</span>
                  </div>
                  <div
                    class="demo-input-suffix base-info"
                    style="font-size: 18px;"
                  >
                    &nbsp;&nbsp;&nbsp;详细地址：
                    <span>{{ formData.receiverAddress }}</span>
                  </div>
                </div>
              </div>
              <div
                class="pake-info"
                style="margin-top: 10px"
              >
                <img
                  style="weight:20px,height:20px"
                  class="img-info1"
                  src="../../assets/juli.png"
                  alt=""
                />
                <span style="font-size: 20px;">距离：{{ formData.distance }}km</span>
              </div>
              <div style="margin-top: 0px; margin-left: 40px; display: flex">
                <div style="">
                  备注：
                  <span>{{ formData.mark }}</span>

                </div>
              </div>
            </el-timeline>
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-collapse>
        <el-collapse-item>
          <template slot="title">
            <div class="collapse-detail">订单跟踪</div>
          </template>
        </el-collapse-item></el-collapse>
      <el-collapse>
        <el-collapse-item>
          <template slot="title">
            <div class="collapse-detail">订单轨迹</div>
          </template>
        </el-collapse-item></el-collapse>
      <el-collapse v-model="activeNames">
        <el-collapse-item name="4">
          <template slot="title">
            <div class="collapse-detail">取件信息</div>
          </template>
          <el-row
            :gutter="60"
            label-width="60px"
          >
            <el-col :span="5"> 所在网点：
              {{ formData.taskPickup.agency.name }}
            </el-col>
            <el-col :span="5"> 取件类型:
              {{ formData.pickupType===2?'上门取件':'网点自寄' }}
            </el-col>
            <el-col :span="5">
              <div class="zyzt">
                作业状态：
                <label v-if="formData.taskPickup.status===1">新任务</label>
                <label v-else-if="formData.taskPickup.status===2">已完成</label>
                <label v-else>已取消</label>
              </div>
            </el-col>
            <el-col :span="5"> 取件快递员：{{ formData.taskPickup.courier.name }}</el-col>
            <el-col :span="5"> 快递员电话：{{ formData.taskPickup.courier.mobile }} </el-col>
            <el-col :span="5"> 预计取件时间：{{ formData.estimatedStartTime }} </el-col>
            <el-col :span="5"> 取件完成时间：{{ formData.estimatedArrivalTime }}  </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
      <el-collapse v-model="activeNames">
        <el-collapse-item name="5">
          <template slot="title">
            <div class="collapse-detail">派送信息</div>
          </template>
          <el-row
            :gutter="60"
            label-width="60px"
          >
            <el-col :span="5"> 所在网点：</el-col>
            <el-col :span="5">
              <div class="zyzt">
                作业状态：
              </div> </el-col>
            <el-col :span="5"> 派送快递员： </el-col>
            <el-col :span="5"> 快递员电话： </el-col>
            <el-col :span="5"> 预计派送时间： </el-col>
            <el-col :span="5"> 派件完成时间： </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
      <el-collapse v-model="activeNames">
        <el-collapse-item name="6">
          <template slot="title">
            <div class="collapse-detail">费用信息</div>
          </template>
          <el-row
            :gutter="60"
            label-width="60px"
          >
            <el-col :span="5"> 运费：
              <span class="many">{{ formData.amount }}  </span> 元</el-col>
            <el-col :span="5">
              <div class="fkfs">
                付款方式：
                <label v-if="formData.paymentMethod===1">预结</label>
                <label v-if="formData.paymentMethod===2">到付</label>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="fkzt">
                付款状态：
                <label v-if="formData.paymentStatus===1">未付</label>
                <label v-if="formData.paymentStatus===2">已付</label>
              </div>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
      <el-collapse
        style="margin-top: 20px; margin-bottom: 40px"
      >
        <el-collapse-item>
          <template slot="title">
            <div class="collapse-detail">货品信息</div>
          </template>
          <template>
            <div>
              <el-table
                style="width: 100%"
              >
                <el-table-column
                  label="序号"
                  width="80"
                >
                </el-table-column>
                <el-table-column

                  label="货品名称"
                  width="350"
                >
                </el-table-column>
                <el-table-column

                  label="货品类型"
                  width="370"
                >
                </el-table-column>
                <el-table-column

                  label="重量（千克）"
                  width="370"
                >
                </el-table-column>
                <el-table-column
                  label="体积（立方）"
                  width="450"
                >
                </el-table-column>
                <el-table-column
                  label="操作"
                >
                </el-table-column>

              </el-table>
            </div>

          </template>
        </el-collapse-item>
      </el-collapse>
    </div>

  </div>
</template>
<script>
import { orderDetail } from '@/api/order'
export default {
  data() {
    return {
      formData: {
        page: '', // 页码
        pageSize: '', // 页尺寸
        code: '', // 状态编码
        amount: '', // 金额
        createTime: '', // 下单时间
        distance: '', // 距离
        estimatedArrivalTime: '', // 预计到达时间
        estimatedStartTime: '', // 预计取件时间
        id: '',
        mark: '', // 备注
        memberId: '', // 客户id
        orderCargoDTOS: '', // 货品集合
        orderType: '', // 订单类型
        paymentMethod: '', // 付款方式
        paymentStatus: '', // 付款状态
        pickupType: '', // 取件类型
        receiverAddress: '', // 收件人详细地址
        receiverCity: {}, //  收件人城市
        receiverCounty: {}, // 收件人区县
        receiverName: '', // 收件人姓名
        receiverPhone: '', // 收件人电话
        receiverProvince: {}, // 收件人省份
        senderAddress: '', // 发件人详细地址
        senderCity: {}, // 发件人城市
        senderCounty: {}, // 发件人区县
        senderName: '', // 发件人姓名
        senderPhone: '', // 发件人电话
        senderProvince: {}, // 发件人省份
        status: '', // 订单状态
        taskDispatch: {}, // 派件信息
        taskPickup: '', // 取件信息
        taskRejectionDispatch: '', // 拒收派件信息
        transportOrder: {}, // 运单信息
        transportOrderPointVOS: {}, // 运单信息流
        updated: '',
        courier: {}, // 更新时间
        agency: {}
      },
      activeNames: ['1', '2', '3', '4', '5', '6', '7', '8'],
      wayId: '',
      agency: {},
      courier: {}

    }
  },
  created() {
    // 接收传参
    this.wayId = this.$route.query.id
    // 调用接口请求数据
    this.getOrderDetail(this.wayId)
  },
  methods: {
    // 获取订单页详情
    async getOrderDetail(wayId) {
      const res = await orderDetail(wayId)
      console.log(res)
      this.formData = res.data
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import './index.scss';
/deep/.el-col-5 {
  color: #333;
  padding-left: 120px !important;
  padding-top: 10px;
  font-size: 15px;
}
/deep/.collapse-detail{
   font-weight: 800 !important;
   font-size: 20px !important;
}
/deep/.el-timeline{
  font-weight: 800 !important;
   font-size: 25px;
}
.many{
  font-size: 20px;
  color: goldenrod;
}

</style>

